<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            color: ['skyblue'],
            tooltip : {
                trigger: 'axis'
            },
            calculable : false,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    min:0,
                    max:1000
                }
            ],
            series : [
                {
                    name:'邮件营销',
                    type:'line',
                    symbolSize:5,
                    symbol:'circle',
                    stack: '总量',
                    smooth: true,
                    itemStyle: {
                        normal: {
                          color:'#000',
                          borderColor:'#000',//拐点边框颜色
                          borderWidth:3,//拐点边框大小
                          areaStyle:{
                          type: 'default',
                          color : new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                            //三种由深及浅的颜色
                            [ {
                              offset : 0,
                              color : 'skyblue'
                            },
                            // {
                            //   offset : 0.5,
                            //   color : 'lightblue'
                            // },
                            {
                              offset : 1,
                              color : '#fff'
                            } ]),
                          }
                        }
                      },
                    data:[120, 132, 101, 134, 90, 230, 210]
                }
            ]
        };
        // 为echarts对象加载数据
        myChart.setOption(option);
    </script>
</body>
